<template>
    <div class="phone">
        <p>
            哈苏全焦段大师影像
            <br>
            所拍皆是大作
        </p>
        <div class="phone-bg" ref="bgRef">
            <img ref="imgRef" src="../../assets/img/hasu.jpg" alt="">
        </div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'

const bgRef = ref()
const imgRef = ref()
let initialScale = sessionStorage.getItem('scale') || 1.5 // 初始缩放比例
let scaleFactor = 0.002 // 每滚动1px缩放的比例
let scaleAmount = 0 // 记录缩放量的变量
const type = ref(false)
// onMounted(() => {
//     scale()
// })

// 初始化图片的缩放比例
// const scale = () => {
//     console.log(imgRef.value);
//     imgRef.value.style.transform = 'scale(' + initialScale + ')'
//     // 当滚动条滚动时触发的事件处理函数
//     bgRef.value.addEventListener('mousewheel', function (event) {
//         // 计算缩放量
//         scaleAmount += this.scrollTop
//         if (event.deltaY > 0) {
//             // console.log('向下滚动')
//             if (imgRef.value.style.transform < 0.8)
//                 return (imgRef.value.style.transform = 0.8)
//             scaleAmount--
//         } else {
//             // console.log('向上滚动')
//             if (imgRef.value.style.transform > 1.2)
//                 return (imgRef.value.style.transform = 1.2)
//             scaleAmount++
//         }

//         console.log(scale, '滚动的scale');
//         // 应用缩放效果

//         // console.log(imgRef.value.style.transform)
//     })
// }
const num = ref(0)
window.addEventListener('scroll', function () {
    // 计算缩放量
    var distanceFromTop = document.documentElement.scrollTop;
    if (distanceFromTop > 3660) {
        num.value = distanceFromTop
        type.value = true
    } else {
        type.value = false
    }
})
watch(num, (nValue, oValue) => {
    if (type.value) {
        if (nValue < oValue) {
            initialScale += scaleFactor
            sessionStorage.setItem('scale', initialScale)
            imgRef.value.style.transform = 'scale(' + initialScale + ')'
        } else {
            if (initialScale > 1) {
                initialScale -= scaleFactor
                sessionStorage.setItem('scale', initialScale)
            }
            imgRef.value.style.transform = 'scale(' + initialScale.toFixed(2) + ')'
        }
    }
})
</script>

<style scoped lang="scss">
.phone {
    text-align: center;
    width: 100%;
    background-color: #000;
}

p {
    font-size: 72px;
    background-color: #000;
    color: #fff;
    position: relative;
    z-index: 777;
}

.phone-bg {
    height: 675px;
    overflow: hidden;
}

.phone-bg img {
    width: 100%;
    height: 100%;
    min-height: 672px;
    max-height: 748px;
    background-color: transparent;
    transition: transform 0.3s ease-in-out; // 添加过渡效果
}
</style>